<template>
  <div class="drawer-header">
    <el-row :gutter="0">
      <el-col :span="16"><div class="title">{{title}}</div></el-col>
      <el-col :span="8">
        <div class="close-button">
          <i class="el-icon-close" @click="onClose"></i>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'drawer-header',
  props: {
    title: {
      type: String
    }
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    onClose () {
      // this.$emit('closeDrawer')
      this.$parent.$parent.closeDrawer()
    }
  }
}
</script>

<style lang="scss">
  .drawer-header {
    border-bottom: 1px solid #e8e8e8;
    padding: 16px
  }
  .close-button {
    text-align: right;
    padding-right: 10px;
    cursor: pointer;
    font-size: 22px;
  }
</style>
